<template>
  <div class="help">
    <h2>帮助</h2>
    <section>
      <h3>功能概览</h3>
      <ul>
        <li>支持 HTTP/HTTPS 下载与 BT（磁力/种子）下载。</li>
        <li>多任务管理：暂停、继续、删除、全选、排序与搜索。</li>
        <li>详情面板：查看名称、类型、状态、速度、进度、路径与剩余时间。</li>
        <li>日志面板：实时查看任务事件日志，便于排查问题。</li>
        <li>设置中心：HTTP 设置、BT 设置、系统设置。</li>
      </ul>
    </section>
    <section>
      <h3>侧边栏</h3>
      <ul>
        <li>正在下载：显示下载中/暂停/等待中的任务。</li>
        <li>正在等待：仅显示等待中的任务。</li>
        <li>已完成/已停止：显示已完成/暂停/失败的任务。</li>
        <li>http设置 / bt设置 / 系统设置：打开对应设置页面。</li>
      </ul>
    </section>
    <section>
      <h3>工具栏</h3>
      <ul>
        <li>新建：添加下载任务。</li>
        <li>开始/暂停/删除：对选中任务执行操作。</li>
        <li>双勾：全选列表任务。</li>
        <li>上下箭头：切换排序字段（名称/速度/大小）。</li>
        <li>搜索：按名称或链接关键字筛选任务。</li>
        <li>问号：打开帮助页面。</li>
      </ul>
    </section>
    <section>
      <h3>下载列表</h3>
      <ul>
        <li>进度列显示进度条与百分比，速度列显示实时速度。</li>
        <li>每行右侧提供 暂停/开始、删除、详情 操作。</li>
        <li>点击行可选中任务，快捷操作基于选中项。</li>
      </ul>
    </section>
    <section>
      <h3>详情与日志</h3>
      <ul>
        <li>详情：展示基础信息、进度与保存路径等；支持打开目录、复制链接、重命名。</li>
        <li>日志：展示任务事件记录（时间、级别、内容）。</li>
        <li>可通过“关闭”按钮隐藏详情面板。</li>
      </ul>
    </section>
    <section>
      <h3>设置页面</h3>
      <ul>
        <li>HTTP 设置：代理、速度限制、最大并发。</li>
        <li>BT 设置：做种保持、最大连接数。</li>
        <li>系统设置：默认保存路径、界面语言。</li>
      </ul>
    </section>
    <section>
      <h3>状态栏</h3>
      <ul>
        <li>显示总下载量、总体速度与活动任务数量。</li>
        <li>提供“全部暂停/全部开始/清除已完成”等批量操作（在任务列表页面显示）。</li>
      </ul>
    </section>
  </div>
</template>

<script setup>
</script>

<style scoped>
.help{ flex: 1; min-height: 0; overflow: auto; padding: 12px; display:grid; gap: 12px; background: var(--card-bg); border:1px solid var(--border-color); border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.1); text-align: left; }
.help h2{ margin:0 0 4px 0; font-size:18px; text-align: center; }
.help h3{ font-size:14px; margin:6px 0; color: var(--text-secondary); }
.help ul{ margin:0; padding-left: 18px; display:grid; gap:6px; }
</style>
